<template>
<div class="app-container">
   <!-- 查询表单 -->
   <el-form :inline="true" class="demo-form-inline">
   <!-- 所属分类 ：级联下拉列表 -->
   <!-- 一级分类 -->
    <el-form-item label="课程类别">
        <el-select 
            v-model="courseQuery.subjectParentId"
            placeholder="请选择"
            @change="subjectLevelOneChanged">
          <el-option 
            v-for="s1 in subjectList"
            :label="s1.title" 
            :value="s1.id"
            :key="s1.id" />
        </el-select>

        <!-- 二级分类 -->
        <el-select 
            v-model="courseQuery.subjectId"
            placeholder="请选择">
          <el-option 
            v-for="s2 in subjectLevelTwoList"
            :label="s2.title" 
            :value="s2.id"
            :key="s2.id" />
        </el-select>
    </el-form-item>

    <!-- 标题 -->
    <el-form-item>
        <el-input v-model="courseQuery.title" placeholder="课程标题"></el-input>
    </el-form-item>

    <!-- 讲师 -->
    <el-form-item>
        <el-select 
            v-model="courseQuery.teacherId"
            placeholder="请选择讲师">
          <el-option 
            v-for="teacher in teacherList"
            :label="teacher.name" 
            :value="teacher.id"
            :key="teacher.id" />
        </el-select>
    </el-form-item>
    <el-button type="success" icon="el-icon-search" @click="fetchData()">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
   </el-form>

   
   <!-- 表格 -->
   <el-table :data="list" border stripe row-class-name="myClassList">

     <el-table-column label="#" width="50">
        <template slot-scope="scope">
            {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
     </el-table-column>

     <el-table-column label="封面" width="200" align="center">
        <template slot-scope="scope">
            <img :src="scope.row.cover" alt="scope.row.title" width="100%">
        </template>
     </el-table-column>

    <el-table-column label="课程信息">
        <template slot-scope="scope">
            <a href="">{{ scope.row.title }}</a>
            <p>
                分类：{{ scope.row.subjectParentTitle }} > {{ scope.row.subjectTitle }}
            </p>
            <p>
                课时：{{ scope.row.lessonNum }}
                浏览：{{ scope.row.viewCount }}
                付费学员：{{ scope.row.buyCount }}
            </p>
        </template>
     </el-table-column>

     <el-table-column label="讲师" width="100" align="center">
        <template slot-scope="scope">
            {{ scope.row.teacherName }}
        </template>
     </el-table-column>

     <el-table-column label="价格(RMB)" width="100" align="center">
        <template slot-scope="scope">
            <el-tag v-if="Number(scope.row.price) === 0" type="success">免费</el-tag>
            <el-tag v-else>{{ scope.row.price }}</el-tag>
        </template>
     </el-table-column>

      <el-table-column prop="status" label="课程状态" width="100" align="center">
        <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'Draft' ? 'warning' : 'success' ">
            {{ scope.row.status === 'Draft' ? '未发布': '已发布'}}
            </el-tag>
        </template>
     </el-table-column>

      <el-table-column label="创建时间" width="120" align="center">
        <template slot-scope="scope">
            {{ scope.row.gmtCreate.substr(0,10) }}
        </template>
     </el-table-column>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
            <router-link :to="'/course/info'+scope.row.id">
                <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById">删除</el-button>
        </template>
     </el-table-column>

   </el-table>
   <!-- 分页 -->
   <el-pagination align="center"
    :total="total" 
    :current-page="page" 
    :page-size="limit"
    :page-sizes="[5,10,20,30,40,50,100]"
    @size-change="changePageSize"
    @current-change="changeCurrentPage" 
    layout="total,sizes,prev,pager,next,jumper"/>
</div>
</template>

<script>
import courseApi from "@/api/teacher/course"
import teacherApi from "@/api/teacher/teacher"
import subjectApi from "@/api/teacher/subject"
export default {
    data() {
        return {
            list:[],//课程列表
            total:0,
            page:1,
            limit:2,
            courseQuery:{
                subjectId:''
            },//查询条件
            teacherList:[],//讲师列表
            subjectList:[],//以及分类列表
            subjectLevelTwoList:[]//二级分类列表
        }
    },
    created() {
        this.fetchData()
         //初始化所有讲师
         this.getListTeacher()
         //初始化一级分类
         this.getOneSubject()
    },
    methods: {
        //获取课程列表
        fetchData(){
            courseApi.getPageList(this.page,this.limit,this.courseQuery)
            .then(res => {
                this.list = res.data.rows
                this.total = res.data.total
            })
        },
        resetData(){
            this.courseQuery = {},
            this.subjectLevelTwoList = [],
            this.fetchData()
        },
         //获取讲师列表
        getListTeacher(){
            courseApi.getTeacherList()
            .then(res => {
                this.teacherList = res.data.items
            })
        },
        //获取课程分类列表
         getOneSubject(){
            subjectApi.getSubjectList()
            .then(res => {
                this.subjectList = res.data.list
            })
        },
         //点击某个一级分类，触发change，显示对应的二级分类
        subjectLevelOneChanged(value){
            //value就是一级分类ID的值
            //遍历所有的分类，包含一级和二级
            for(var i=0;i<this.subjectList.length;i++){
                // 判断：所有的一级分类ID和点击一级分类ID是否一样
                if(value === this.subjectList[i].id){
                    this.subjectLevelTwoList = this.subjectList[i].children
                    this.courseQuery.subjectId = ''
                }
            }
        },
        //每页记录数改变，size：回调参数，表示当前选中的"每页条数"
        changePageSize(size){
            this.limit = size
            this.fetchData()
        },
        //改编页码，page：回调参数，表示当前选中的"页码"
        changeCurrentPage(page){
            this.page = page
            this.fetchData()
        }
    },
}
</script>
